<template>
  <el-dialog title="确认函信息" :visible.sync="show" :close-on-click-modal="false" append-to-body v-loading="loading">
    <sections class="b-cells" v-if="list.length > 0" :title="list[0].confirmation_name" m-color="#46CDCF"
      content-height="auto">
      <flexbox :gutter="0" wrap="wrap" v-if="isEdit">
        <flexbox-item v-for="(item, index) in fieldList" :key="index" :span="item.types == 4 ? 1 : 0.5" class="b-cell">
          <Confirm-form :value="item" @change="changeField" />
        </flexbox-item>
      </flexbox>
      <flexbox :gutter="0" wrap="wrap" v-else style="padding: 10px 8px 0">
        <flexbox-item :span="item.type == 4 ? 1 : 0.5" v-for="(item, index) in list" :key="index" class="b-cell">
          <flexbox align="stretch" class="b-cell-b">
            <div class="b-cell-name">{{ item.name }}</div>
            <div class="b-cell-value" v-if="item.type != 4">
              {{
                typeof item.value_data == "object"
                  ? item.value_data.toString()
                  : item.value_data
              }}
            </div>
            <div class="b-cell-value" style="width: 100%" v-else>
              <el-table v-if="item.value_data.length > 0" :data="item.value_data" border style="width: 100%">
                <el-table-column v-for="(f, k) in item.config.options" :key="k" :prop="f.label" :label="f.label" />
              </el-table>
            </div>
          </flexbox>
        </flexbox-item>
      </flexbox>
      <flexbox justify="center" v-if="canEdit">
        <el-button @click="handleEdit">{{ isEdit ? "取 消" : "编 辑" }}</el-button>
        <el-button @click="handleSave" v-if="isEdit" type="primary">保 存</el-button>
      </flexbox>
    </sections>
  </el-dialog>
</template>

<script>
  import Lockr from 'lockr'
  import ConfirmForm from "@/components/CreateCom/ConfirmForm";
  import Sections from "../components/Sections";
  import {
    crmDataField,
    crmProductDetail,
    crmContractCategoryUpdate,
  } from "@/api/customermanagement/confirmation";

  export default {
    /** 订单确认函详情 */
    name: "contract-confirm",
    components: {
      ConfirmForm,
      Sections,
    },
    props: {
      value: {
        type: Boolean,
        default: false,
      },
      // 详情信息id
      id: [String, Number],
      // 订单ID
      contractId: {
        type: [String, Number],
        default: null,
      },
      // 工单详情
      detail: {
        type: Object,
        default: () => {
          return {};
        },
      },
    },
    computed: {
      show: {
        get() {
          return this.value;
        },
        set() {
          this.$emit("input", false);
        },
      },
      canEdit() {
        const userInfo = Lockr.get('loginUserInfo');
        let state = this.detail.state;
        return userInfo.post === '管家' || ( userInfo.post !== '管家' && parseInt(state) <= 2)
      }
    },
    watch: {
      show(v) {
        if (v) {
          this.getDetial();
        } else {
          this.list = [];
          this.fieldList = [];
          this.isEdit = false;
        }
      },
    },
    data() {
      return {
        loading: false, // 展示加载loading
        isEdit: false, // 是否可编辑
        list: [],
        fieldList: [],
      };
    },
    methods: {
      // 获取数据
      getDetial() {
        this.loading = true;
        crmProductDetail({
            contract_id: this.contractId,
            product_id: this.id,
          })
          .then((res) => {
            this.list = res.data;
          })
          .finally(() => {
            this.loading = false;
          });
      },
      // 获取字段
      getField() {
        crmDataField({
          product_id: this.id,
          contract_id: this.contractId
        }).then((res) => {
          this.fieldList = res.data.category;
          // this.fieldList.forEach((i, k) => {
          //   i.value = this.list[k].value_data;
          // });
        });
      },
      // 改变字段信息
      changeField(val) {
        let index = this.fieldList.findIndex(
          (i) => i.confirmation_category_id == val.confirmation_category_id
        );
        this.fieldList[index] = val;
      },
      // 切换编辑
      handleEdit() {
        this.isEdit = !this.isEdit;
        this.getField();
      },
      // 保存确认函
      handleSave() {
        let filte = this.fieldList.filter((i) => i.is_must == 1);
        let pass = true;
        for (const i in filte) {
          const item = filte[i];
          if (item.is_must == 1 && !("value" in item)) {
            this.$message.warning(`${item.title}为必填项`);
            pass = false;
            break;
          } else {
            if (item.value == "" || item.value.length == 0) {
              this.$message.warning(`${item.title}为必填项`);
              pass = false;
              break;
            }
          }
        }
        if (!pass) return;
        let result = this.fieldList.map((i, k) => {
          return {
            contract_confirmation_id: this.list[k] && this.list[k].contract_confirmation_id || '',
            confirmation_id: i.confirmation_id || '',
            confirmation_category_id: i.confirmation_category_id || '',
            is_must: i.is_must || '',
            contract_id: this.contractId || '',
            name: i.title || '',
            value_data: i.value || '',
            type: i.types || '',
            product_id: this.id || '',
          };
        });
        crmContractCategoryUpdate({
          confirmation: result,
        }).then((res) => {
          this.$message.success("编辑成功");
          this.getDetial();
          this.isEdit = false;
        });
      },
    },
  };

</script>

<style lang="scss" scoped>
  @import "../styles/relativecrm.scss";

  .b-cell {
    padding: 0 10px;

    .b-cell-b {
      width: 100%;
      padding: 8px;

      .b-cell-name {
        width: 100px;
        margin-right: 10px;
        font-size: 13px;
        flex-shrink: 0;
        color: #777;
      }

      .b-cell-value {
        font-size: 13px;
        color: #333;
        word-wrap: break-word;
      }

      .b-cell-foot {
        flex-shrink: 0;
        display: block;
        width: 15px;
        height: 15px;
        margin-left: 8px;
      }
    }
  }

</style>
